<template>
  <div>
    <div class="whol" ref="whol">
      <!-- 头部上传头像 -->
      <header class="box animated bounceInDown">
        <van-uploader v-show="!pictureLoading" :after-read="afterRead">
          <img :src="src" alt class="portrait" />
          <!-- <span class="test">上传头像</span> -->
        </van-uploader>
        <div v-show="pictureLoading" class="van-uploader">
          <van-loading type="spinner" color="#1989fa" />
        </div>
      </header>
      <!-- 修改密码等 -->
      <div class="box animated fadeInRight">
        <div class="list">
          <router-link :to="{name:'change',params:{title:changePasword}}">
            <van-cell :title="changePasword" is-link />
          </router-link>
          <router-link :to="{name:'Personal',params:{title:personal}}">
            <van-cell :title="personal" is-link />
          </router-link>
          <router-link :to="{name:'Look',params:{title:look}}">
            <van-cell :title="look" is-link />
          </router-link>
          <router-link :to="{name:'collection',params:{title:collection}}">
            <van-cell :title="collection" is-link />
          </router-link>
          <router-link :to="{name:'History',params:{title:history}}">
            <van-cell :title="history" is-link />
          </router-link>
        </div>
      </div>
      <!-- 退出登录 -->
      <div class="retreat">
        <van-button
          round
          size="normal"
          :disabled="disabled"
          icon="closed-eye"
          type="info"
          @click="out"
        >退出登录</van-button>
      </div>
      <!-- 底部导航 -->
      <Botto></Botto>
    </div>
  </div>
</template>
<script>
import { setPortrait } from "../api/User-api";
import Botto from "../components/Bottom.vue";
import { mapState } from "vuex";
import { logout,Look} from "../api/User-api";
import { SUCCESS } from "../store/mutaions_type";
export default {
  created() {
    Look().then(res =>{
      console.log(res);
      this.src = res.data.avatar
    })
  },
  mounted() {
    this.$refs.whol.style.height = screen.availHeight + "px";
  },
  components: {
    Botto
  },
  data() {
    return {
      src: "",
      changePasword: "修改密码",
      personal: "修改个人信息",
      look: "查看个人信息",
      collection: "收藏记录",
      history: "历史记录",
      disabled: false,
      pictureLoading:false,
    };
  },
  computed: {
    ...mapState({
      Whether: "Whether"
    })
  },
  methods: {
    // 修改头像
    afterRead(file) {
      // eslint-disable-next-line no-debugger
      this.pictureLoading = true;
      setPortrait(file.file).then(res => {
        if( res.code == 0){
        Look().then(res =>{
          this.src = res.data.avatar
          this.pictureLoading = false
        })
      }else{
        this.$notify({
          type:"danger",
          message:res.msg
        })
      }
        console.log(res);
      });
    },
    out() {
      if (this.disabled == false) {
        this.disabled = true;
        // 按钮禁用
        setTimeout(() => {
          this.disabled = false;
          console.log(this.disabled);
        }, 3000);
        logout().then(res => {
          if (res.code == 0) {
            this.$store.commit(SUCCESS, {
              Whether: res.code
            });
            console.log(res);
          } else {
            this.$store.commit(SUCCESS, {
              Whether: res.code
            });
            console.log(res.code);
          }
        });
      }
      this.$router.push("/Login");
    }
  }
};
</script>
<style lang="less" scoped>
.whol {
  background-color: #ebebeb;
  overflow: hidden;
}
header {
  display: flex;
  height: 200px;
  justify-content: center;
  align-items: center;
  /deep/ .van-uploader {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    text-align: center;
    background-color: #fefefe;
    span {
      color: #1989fa;
      line-height: 0px;
    }
  }
}
.portrait {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.list {
  margin-bottom: 220px;
}
.retreat {
  text-align: center;
}
</style>